<!--查看本本地下载文件 -->
<template>
  <div>
    <Modal v-model="modal.show"  :loading="modal.loading" :title="modal.title"  :mask-closable="false" :footer-hide=true width="1080" :closable="false">
<!--      <Card>-->
        <Table border :columns="columns" :data="tableData" :loading="tableLoading">
          <template slot-scope="{ row, index }" slot="action">
            <Button type="default" :Title="$t('play')" icon="md-play"  style="margin-right: 1px" @click="play(row)"></Button>
          </template>
        </Table>
        <TopnavPage v-model="page" @changePage="changePage"></TopnavPage>
<!--      </Card>-->
<!--      <Card>
        <video ref="videoPlayer"
                autoplay>
      </video>
      </Card>-->

      <Row>
        <Col span="24">
          <div style="display: flex;justify-content: center">
            <Button type="primary" @click="close">{{$t('close')}}</Button>
          </div>
        </Col>
      </Row>
    </Modal>
    <DownloadFilePlay ref="downloadFilePlay"></DownloadFilePlay>
  </div>
</template>
<script>
import TopnavPage from "_c/topnav/TopnavPage";
import DownloadFilePlay from "@/view/Home/utils/DownloadFilePlay";
export default {
  components:{TopnavPage,DownloadFilePlay},
  data(){
    return{
      modal:{
        show:false,
        loading:false,
        title:this.$t('download_video')
      },
      columns:[
        { title: this.$t('play'), key: 'action', width: 75, slot: 'action', align: 'center' },
        {title: this.$t('file_name'), key: 'name', sortable: true, ellipsis:true,width: 400,tooltip:true,tooltipTheme:'light'},
        {title: this.$t('type'), key: 'type', sortable: true, ellipsis:true,width: 150,tooltip:true,tooltipTheme:'light'},
        {title: this.$t('size'), key: 'size', sortable: true, ellipsis:true,width: 150,align: 'right',tooltip:true,tooltipTheme:'light'},
        {title: this.$t('time'), key: 'time', sortable: true, ellipsis:true,width: 200,tooltip:true,tooltipTheme:'light'},
      ],
      page: {
        pages: 1,
        size: 15,
        total: 0,
        current: 1,
      },
      tableData:[],
      tableLoading:false,
    }
  },
  methods:{
    openDialog(files){
      this.tableData = files;
      this.page.total = files.length;
      this.modal.show = true;
    },
    changePage(){

    },
    close(){
      this.modal.show =false;
    },
    play(row){
      this.$refs.downloadFilePlay.openDialog(row.file);
/*      console.log("videoPlayer:%o",this.$refs.videoPlayer);
      console.log("file:%o",row.file)
      const url = URL.createObjectURL(row.file);
      console.log("url:%o",url)
      this.$refs.videoPlayer.src=url;*/
    }


  }
}
</script>
<style lang="less">

</style>
